<!--
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~      http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<em class="ddp-bg-back"></em>
<div class="ddp-ui-contents-in ddp-scroll">
  <!-- top -->
  <div class="ddp-ui-contents-top">
    <div class="ddp-ui-title">
      {{'msg.comm.menu.manage.storage' | translate}}
    </div>
    <!-- tab -->
    <ul class="ddp-list-top-tab">
      <li>
        <a [routerLink]="['/management/storage/datasource']">{{'msg.comm.menu.manage.storage.ds' | translate}}</a>
      </li>
      <li class="ddp-selected">
        <a [routerLink]="['/management/storage/data-connection']">{{'msg.comm.menu.manage.storage.conn' | translate}}</a>
      </li>
    </ul>
    <!-- //tab -->
  </div>
  <!-- //top -->
  <div class="ddp-ui-contents-list">
    <div class="ddp-wrap-top-filtering">
      <!-- filter search -->
      <div class="ddp-filter-search ddp-fright">
        <div class="ddp-form-filter-search" style="width:215px;">
          <component-input
            [autoFocus]="false"
            [isEnableDelete]="true"
            [value]="searchKeyword"
            [placeHolder]="'msg.storage.ph.connection.search' | translate"
            (changeValue)="onChangedSearchKeyword($event)">
          </component-input>
        </div>
        <!-- form -->
        <a href="javascript:" class="ddp-btn-selection" (click)="reloadPage(true)">{{'msg.comm.btn.search' | translate}}</a>
      </div>
      <!-- //filter search -->
      <!-- filters -->
      <component-criterion [criterionApiFunc]="criterionApiFunc"
                           (changedFilter)="onChangedFilter($event)">
      </component-criterion>
      <!-- //filters -->
    </div>
    <!-- create connection -->
    <div class="ddp-filter-option">
      <!-- list length -->
      <span class="ddp-data-total ddp-only" [innerHtml]="'msg.storage.ui.list.length' | translate: {value: pageResult.totalElements || 0}"></span>
      <!-- //list length -->
      <a href="javascript:" class=" ddp-btn-pop ddp-bg-black" (click)="onClickCreateConnection()"><em class="ddp-icon-add2"></em>{{'msg.comm.btn.new' | translate}}</a>
    </div>
    <!-- //create connection -->
    <div class="ddp-data-source-none" *ngIf="isEmptyList(); else existList">
      {{'msg.comm.ui.no.rslt' | translate}}
    </div>
    <ng-template #existList>
      <table class="ddp-table-form ddp-table-type3">
      <colgroup>
        <col width="*">
        <col width="12%">
        <col width="20%">
        <col width="20%">
      </colgroup>
      <thead>
      <tr>
        <th>
          {{'msg.comm.ui.sel.conn' | translate}}
        </th>
        <th>
          {{'msg.storage.th.db_type' | translate}}
        </th>
        <th>
          {{'msg.comm.th.host' | translate}}/{{'msg.comm.th.port' | translate}}({{'msg.storage.ui.conn.url'|translate}})
        </th>
        <th class="ddp-cursor" (click)="sortConnectionList('createdTime')">
          {{'msg.comm.th.created' | translate}}
          <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'createdTime' && selectedContentSort.sort === 'asc'"></em>
          <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'createdTime' && selectedContentSort.sort === 'desc'"></em>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let connection of connectionList" (click)="onClickConnection(connection)">
        <td>
          {{connection.name}}
        </td>
        <td>
          {{getConnectionImplementorLabel(connection.implementor)}}
        </td>
        <td>
          <span>{{isDefaultType(connection) ? connection.hostname + ' / ' + connection.port : connection.url}}</span>
        </td>
        <td class="ddp-data-last">
          {{connection.createdTime | mdate: 'YYYY-MM-DD HH:mm'}}  <em class="ddp-icon-by">{{'msg.storage.ui.by' | translate}}</em>{{connection.createdBy.fullName}}
          <div class="ddp-btn-control">
            <em class="ddp-icon-control-cut" (click)="onClickRemoveConnection(connection); $event.stopPropagation()"></em>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
      <!-- Pagination -->
      <component-pagination [info]="pageResult" (changePageData)="changePage($event)"></component-pagination>
      <!-- // Pagination -->
    </ng-template>
  </div>
</div>
<!-- 커넥션 생성 팝업 -->
<app-create-connection (createdConnection)="reloadPage()"></app-create-connection>
<!-- 커넥션 상세 팝업 -->
<app-update-connection (updatedConnection)="reloadPage(false)"></app-update-connection>
<!-- 삭제 모달 -->
<app-delete-modal (deleteConfirm)="removeConnection($event)"></app-delete-modal>
